import React from 'react'
import { ResultPage, Card,Switch,Swiper } from 'antd-mobile'
import style from '../index/index.module.css'
import { Button, Space } from 'antd-mobile'
import { LoopOutline } from 'antd-mobile-icons'
import { LunApi } from '../../api/user'
import { useLoaderData } from 'react-router-dom'
function Index() {
  let img='https://ts1.tc.mm.bing.net/th/id/OIP-C.Nj6o69waOC3JTbebyCu-hgHaEc?w=174&h=104&c=8&rs=1&qlt=90&o=6&dpr=1.5&pid=3.1&rm=2'
  let title='五一假期，阿斯蒂芬更好收到发过火森岛帆高瓦尔塔森岛帆高'
  const loader=useLoaderData();
  console.log('轮播图',loader);

  const colors = ['#ace0ff', '#bcffbd', '#e4fabd', '#ffcfac']
  
  // 轮播图颜色，渲染轮播图
  const items = colors.map((color, index) => (
  <Swiper.Item key={index}>
    <div
      className={style.content}
      style={{ background: color }}
     
    >
      {index + 1}
    </div>
  </Swiper.Item>
))

  return (
    <div>
       <ResultPage
      status='success'
      title='火车票预定'
      description='便捷购票,服务您的每一次出行'
    >

      <Card style={{ height: 148, marginTop: 12 }}>

          {/* 火车票预定首页排版 */}
        <div className={style.box}>
          <span>北京</span>
          <span><LoopOutline /></span>
          <span>上海</span>
          <span>2024-12-10 </span>
          <span></span>
          <span></span>
          <span>只看高铁/动车</span>
          <span></span>
          <span><Switch /></span>
        </div>

      </Card>

        <Button style={{marginTop:20}} block color='warning' size='large'>
          搜索
        </Button>

         <Swiper
          className={style.content}
          loop
          autoplay
        >
          {items}
        </Swiper>

         <Card className={style.zx} title='出行快讯'>
              <div>
                <dl>
                  <dt>{title}</dt>
                  <dt><img className={style.tp} src={img} alt="" /></dt>
                </dl>
              </div>
        </Card>
    </ResultPage>

       
       
    </div>
  )
}

export default Index
